﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp" %>

    <style>
        .li_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
            float: left;
        }

        .ul_style {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-top: 20px;
            height: 50px;
            padding-left: 50px;
        }

        #content > tr {
            cursor: pointer
        }
    </style>
</head>
<body>
<div class="container-fluid" id="main-container">
    <div id="page-content" class="clearfix">
        <div class="wrapp/er-content animated fadeInRight" style="position:absolute;">
            <div class="row">
                <div class="col-sm-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title"></div>
                        <br/>
                        <div class="ibox-content pad-top-0">
                            <div class="row mar-5">
                                <form action="position/toDistribution" id="positionForm" method="post"
                                      enctype="multipart/form-data">
                                    <div class="col-sm-12 pad-0" style="margin-left: 50px">
                                    <span>
                                        <input id="imeiFile" name="file" type="file" onchange="changeFile()"
                                               style="width: 210px;float:left">
                                    </span>
                                        <div class="input-group list-group mar-0-martop-10">
                                        <span class="btn-sm w-100"
                                              style="width: 270px;display:inline-block;line-height: 22px;text-shadow: 0 -1px 0 rgba(0,0,0,0.25)!important;font-size: 13px;position: relative;color: red;font: message-box">
                                            选择excel文件（后缀为xls 或 xlsx），设备IMEI/MEID放到A列，1行1个，不能超过2W个
                                        </span>
                                        </div>
                                        <div class="input-group list-group mar-0-martop-10">
                                        <span class="input-group-btn">
                                            <button type="button" onclick="searchDevice()"
                                                    class="btn btn-sm btn-primary w-100"
                                                    style="width: 210px;margin-top: 10px;">
                                                确定
                                            </button>
                                        </span>
                                        </div>
                                        <div class="input-group list-group mar-0-martop-10" id="country"
                                             onclick="searchDeviceArea()">
                                            <a class="input-group-btn">
                                                <button type="button" class="btn btn-sm btn-primary w-100"
                                                        style="width: 210px; margin-top: 10px;" id="resume">
                                                    全国(行政分布)
                                                </button>
                                            </a>
                                        </div>
                                        <span id="msg"
                                              style="float: left;margin-right: 10px;width: 220px;color: red;margin-top: 5px;font-weight: bold;
                                              <c:if test='${empty positions.msg}'>display: none;</c:if>
                                              <c:if test='${not empty positions.msg}'>display: block;</c:if>">
                                            ${positions.msg}
                                        </span>
                                    </div>
                                </form>
                            </div>
                            <div class="row bor-pad-20 region"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="container" class="amap-layers"
             style="transform: translateZ(0px);margin-left: 20%;width:1100px;height: 750px; position: relative">
        </div>

        <div id="areaContainer" class="amap-layers"
             style="transform: translateZ(0px);margin-left: 20%;width:1100px;height: 750px; position: relative; display: none">
        </div>

    </div>
</div>
<!-- 返回顶部  -->
<a href="#" id="btn-scroll-up" class="btn btn-small btn-inverse">
    <i class="icon-double-angle-up icon-only"></i>
</a>
<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/ace-elements.min.js"></script>
<script src="static/js/ace.min.js"></script>

<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
<script type="text/javascript" src="static/js/jquery.tips.js"></script><!--提示框-->
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "830498a4c3fe10c83685c7ee556e2554",
    };
</script>
<script type="text/javascript" src='http://webapi.amap.com/maps?v=2.0&key=8634cfb89333cba8c8b73b8cb4447b16'></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script src="static/js/common/date-util.js"></script>

<script type="text/javascript">
    $(function () {
        top.hangge();
        //日期框
        $('.date-picker').datepicker({autoclose: true});
    });

</script>

<script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        resizeEnable: true
    });
    //创建样式
    var style = [{
        url: '../static/images/1.png',
        anchor: new AMap.Pixel(4, 4),
        size: new AMap.Size(18, 18)
    }, {
        url: '../static/images/2.png',
        anchor: new AMap.Pixel(4, 4),
        size: new AMap.Size(18, 18)
    }
    ];

    var citys = eval('${positions.data}');
    var mass = new AMap.MassMarks(citys, {
        opacity: 0.9,
        zIndex: 111,
        cursor: 'pointer',
        style: style
    });
    var marker = new AMap.Marker({content: ' ', map: map});
    mass.on('mouseover', function (e) {
        //设置显示框的位置
        marker.setPosition(e.data.lnglat);
        var lng = e.data.lnglat.lng;
        var lat = e.data.lnglat.lat;
        var contentText = "<div>";
        contentText += "<p>" + e.data.name + "</p>";
        var time = get_date(e.data.lnglattime);
        if (e.data.lnglattime != undefined) {
            contentText += "<p>" + "定位时间:" + time + "</p>";
        }
        var address = e.data.lnglataddress;
        if (address != undefined) {
            contentText += "<p>" + "位置:" + address + "</p>";
        }
        contentText += "<p>" + "经纬度:" + lat + "," + lng + "</p>";
        contentText += "</div>";

        //设置显示框的文字
        marker.setLabel({
            offset: new AMap.Pixel(20, -80),  //设置文本标注偏移量
            content: contentText
        });
    });
    mass.on('click', function (e) {
        var imei_data = e.data.name;
    });
    // 将海量点添加至地图实例
    mass.setMap(map);

    var flag = '${flag}';

    function searchDevice() {
        if (flag == 0) {
            var fileObj = $('#imeiFile').get(0).files[0];
            if (!fileObj) {
                $("#imeiFile").tips({
                    side: 3,
                    msg: '请选择文件',
                    bg: '#AE81FF',
                    time: 2
                });
                $("#imeiFile").focus();
                return false;
            }
            $("#msg").css("display", "block");
            $("#msg").text("正在进行查找，请耐心等待！");
            $("#positionForm").submit();
        } else {
            $("#areaContainer").css("display", "none");
            $("#container").css("display", "block");
        }
    }

    /******************** 行政分布 ************************/

    var mapArea = new AMap.Map('areaContainer', {
        zoom: 11,
        resizeEnable: true
    });
    var markerArea = new AMap.Marker({content: ' ', map: mapArea});

    function searchDeviceArea() {
        $("#container").css("display", "none");
        $("#areaContainer").css("display", "block");
    }

    function initPage(DistrictCluster, PointSimplifier, $) {
        var pointSimplifierIns = new PointSimplifier({
            map: mapArea, //所属的地图实例
            autoSetFitView: false, //禁止自动更新地图视野
            zIndex: 110,
            getPosition: function (item) {
                if (!item) {
                    return null;
                }
                return item.lnglat;
            },
            getHoverTitle: function (dataItem, idx) {
                var lng = dataItem.lnglat[0];
                var lat = dataItem.lnglat[1];
                var contentText = "<div>";
                contentText += "<p>" + dataItem.name + "</p>";
                var time = get_date(dataItem.lnglattime);
                if (dataItem.lnglattime != undefined) {
                    contentText += "<p>" + "定位时间:" + time + "</p>";
                }
                var address = dataItem.lnglataddress;
                if (address != undefined) {
                    contentText += "<p>" + "位置:" + address + "</p>";
                }
                contentText += "<p>" + "经纬度:" + lat + "," + lng + "</p>";
                contentText += "</div>";
                return contentText;
            },
            renderOptions: {
                //点的样式
                pointStyle: {
                    url: '../static/images/1.png',
                    anchor: new AMap.Pixel(4, 4),
                    size: new AMap.Size(18, 18)
                },
                //鼠标hover时的title信息
                hoverTitleStyle: {
                    position: 'top',
                    //offset: new AMap.Pixel(20, -100) //设置文本标注偏移量
                }
            }
        });
        var distCluster = new DistrictCluster({
            zIndex: 100,
            map: mapArea, //所属的地图实例
            getPosition: function (item) {
                if (!item) {
                    return null;
                }
                //返回经纬度
                return item.lnglat;
            }
        });

        window.distCluster = distCluster;

        function refresh() {
            var zoom = mapArea.getZoom();
            //获取 pointStyle
            var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;
            //根据当前zoom调整点的尺寸
            pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, mapArea.getZoom() - 3);
        }

        mapArea.on('zoomend', function () {
            refresh();
        });
        refresh();
        var lines = eval('${positions.data}');
        distCluster.setData(lines);
        pointSimplifierIns.setData(lines);
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function (DistrictCluster, PointSimplifier, $) {
        //启动页面
        initPage(DistrictCluster, PointSimplifier, $);
    });

    function changeFile() {
        flag = 0;
        $("#msg").css("display", "none");
    }

</script>
</body>
</html>
